<template>
  <div class="wrap">
    <div :class="state" @click="changeState()">
      <span class="inner">{{ state === 'open' ? '手太慢了' : '点我领奖' }}</span>
    </div>
  </div>
</template>


<script>
  function log (str) {
    console.log('[Dropdown] %s', str)
  }

  export default {
    name: 'Dropdown',
    data () {
      return {
        state: 'close'
      }
    },
    beforeCreate () {
      log('I will be created')
    },
    created () {
      log('I\'m created')
    },
    beforeMount () {
      log('I will be mounted')
    },
    mounted () {
      log('I\'m mounted')
    },
    beforeUpdate () {
      log('I will be updated')
    },
    updated () {
      log('I\'m updated')
    },
    beforeDestroy () {
      log('I will be destroyed')
    },
    destroyed () {
      log('I\'m destroyed')
    },
    methods: {
      changeState () {
        this.state = this.state === 'open' ? 'close' : 'open'
      }
    },
    watch: {
      state: function (val, oldVal) {
        console.log('[Dropdown] %s => %s', val, oldVal)
      }
    }
  }
</script>


<style scoped>
  .wrap {
    flex: 1;
    border: 1px solid darkolivegreen;
    user-select: none;
  }
  .open {
    display: flex;
    height: 100px;
  }
  .close {
    display: flex;
    height: auto;
  }
  .inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
